<template>
  <div id="data-view" class="hello">
    <dv-full-screen-container>
      <top-header/>

      <el-row :gutter="20">
        <el-col span="6">
          <el-row>
            <el-col  style="height: 250px;">
              <dv-border-box-11  title="企业基本信息">
                <el-row style="padding-top: 15%;color:#8aaafb;width: 99%;margin-left: 4%;">
                  <el-col span="5">企业名称:</el-col>
                  <el-col span="19">临沂市清洁运输智慧监管平台企业端</el-col>
                  <el-col span="5">企业名称:</el-col>
                  <el-col span="19">临沂市清洁运输智慧监管平台企业端</el-col>
                  <el-col span="5">企业名称:</el-col>
                  <el-col span="19">临沂市清洁运输智慧监管平台企业端</el-col>
                  <el-col span="5">企业名称:</el-col>
                  <el-col span="19">临沂市清洁运输智慧监管平台企业端</el-col>
                  <el-col span="5">企业名称:</el-col>
                  <el-col span="19">临沂市清洁运输智慧监管平台企业端</el-col>
                  <el-col span="5">地址:</el-col>
                  <el-col span="19">山东省临沂市兰山区汪沟镇</el-col>
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>

          <!--      设备在线状态开始-->
          <el-row>
            <el-col  style="height: 250px;">
              <dv-border-box-11  title="设备在线状态">
                <el-row style="padding-top: 15%;color:#8aaafb;">
                  <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:230px;margin-top: -9%;margin-left: 24%;" />
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>
          <!--      设备在线状态结束-->



          <!--      清洁运输占比开始-->
          <el-row>
            <el-col   style="height: 250px;">
              <dv-border-box-11  title="清洁运输占比">
                <el-row style="padding-top: 15%;color:#8aaafb;">
<!--                  <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:230px;margin-top: -9%;margin-left: 24%;" />-->
                  <dv-water-level-pond :config="qingjieyunshuconfig"   style="width:170px;height:160px;margin-left: 30%;" />
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>
          <!--      清洁运输占比结束-->

          <!--      物料类型占比开始-->

          <el-row>
            <el-col style="height: 250px;">
              <dv-border-box-11  title="物料类型占比">
                <el-row style="padding-top: 15%;color:#8aaafb;">
<!--                  <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:230px;margin-top: -9%;margin-left: 24%;" />-->
                  <div id="wuliaoleixing" style="height: 270px;width: 450px;margin-top: -10%;"></div>
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>
          <!--      物料类型占比结束-->

        </el-col>

<!--        中间模块开始-->
        <el-col span="12">

<!--          视频开始-->

          <el-col span="11">
              <div style="width: 450px;">
                <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player>
              </div>
          </el-col>
          <el-col style="margin-left: 30px;" span="11">
            <div style="width: 450px;">
              <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player>
            </div>
          </el-col>
          <el-col span="11" style="margin-top: 20px;">
            <div style="width: 450px;">
              <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player>
            </div>
          </el-col>
          <el-col span="11" style="margin-left: 30px;margin-top: 20px;">
            <div style="width: 450px;">
              <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"></video-player>
            </div>
          </el-col>

          <!--          视频结束-->



          <el-col span="12">
            <el-row>
              <el-col style="height: 330px;margin-top: 10%;">
                <dv-border-box-11  title="车辆排放阶段占比">
                  <el-row style="padding-top: 15%;color:#8aaafb;">
                    <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:300px;margin-top: -9%;margin-left: 24%;" />
                  </el-row>
                </dv-border-box-11>
              </el-col>
            </el-row>
          </el-col>


          <el-col span="12">
            <el-row>
              <el-col style="height: 330px;margin-top: 10%;">
                <dv-border-box-11  title="进出记录">
                  <dv-scroll-board :config="inOutRecord" style="width:90%;height:61%;padding-top: 12%;padding-left: 5%;" />
                </dv-border-box-11>
              </el-col>
            </el-row>
          </el-col>
        </el-col>

        <!--        中间模块结束-->


<!--        右边开始-->
        <el-col span="6">
          <el-row>
            <el-col style="height: 250px;">
              <dv-border-box-11  title="管控策略">
                <el-row style="padding-top: 15%;color:#8aaafb;">
                  <div style="font-size: 40px;width: 93%;margin-left: 3%;height: 170px;">
                    禁行国四及以下重型柴油与国五及以下燃气车通行
                  </div>
<!--                  <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:230px;margin-top: -9%;margin-left: 24%;" />-->
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>



          <el-row>
            <el-col style="height: 250px;">
              <dv-border-box-11  title="相关环保公告">
                <el-row style="padding-top: 15%;color:#8aaafb;">
                  <div style="font-size: 20px;width: 93%;margin-left: 3%;height: 170px;">
                    亲爱的市民们，环保正当时！日常请节约水电、绿色出行，做好垃圾分类，拒绝过度包装。少用化学剂，守护生态平衡。让我们携手，从点滴做起，用行动守护绿水青山，共建美丽家园，为地球添一抹清新绿！
                  </div>

<!--                  <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:230px;margin-top: -9%;margin-left: 24%;" />-->
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>



          <el-row>
            <el-col style="height: 250px;">
              <dv-border-box-11  title="车辆通行数量趋势">
                <el-row style="padding-top: 15%;color:#8aaafb;">
                  <div style="height: 270px;width: 450px;margin-top: -10%;" id="chartsdemo" class="echart">
                  </div>

<!--                  <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:230px;margin-top: -9%;margin-left: 24%;" />-->
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>

          <el-row>
            <el-col style="height: 250px;">
              <dv-border-box-11  title="异常开闸信息">
                <el-row style="padding-top: 15%;color:#8aaafb;">
<!--                  <dv-active-ring-chart :config="deviceStatsConfig" style="width:230px;height:230px;margin-top: -9%;margin-left: 24%;" />-->
                  <div id="yichangInfo" style="height: 270px;width: 450px;margin-top: -10%;"></div>
                </el-row>
              </dv-border-box-11>
            </el-col>
          </el-row>









        </el-col>










<!--        右边结束-->









      </el-row>






    </dv-full-screen-container>
  </div>
</template>

<script>
import topHeader from './topHeader'
export default {
  name: 'HelloWorld',
  components: {
    topHeader
  },
  props: {
    msg: String
  },
  data(){
    return{
      deviceStatsConfig:{
        data: [
          {
            name: '在线',
            value: 55
          },
          {
            name: '离线',
            value: 10
          }
        ],
        color:['#32c5e9','#ff7a38']
      },
      playerOptions: {
        //视频url设置,直播流为例
        sources: [{
          // src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
          src: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',//视频文件地址
          // type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
        }],
        // 其他设置项
        notSupportedMessage: "此视频暂无法播放，请稍后再试",//提示信息
        autoplay: true,//是否自动播放
        controls: false,//是否显示控制栏
        poster: 'http://path/to/poster.jpg',//视频封面
        height:300,
        loop: true
      },
      inOutRecord:{
        header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center'],
        evenRowBGC:'#0c0e22',
        oddRowBGC:'#0c0e22',
        headerBGC:'#0c0e22'


      },
      qingjieyunshuconfig:{
        data:[66],
        shape:'round',
        waveNum:4
      }
    }
  },
  mounted() {
    // 通过 ref 访问 videoPlayer 组件实例，播放
    this.$refs.videoPlayer.play()
  },
  created() {
    let _this =this
    setTimeout(function () {
      _this.cltxslqs()
      _this.yichangkaizha()
      _this.wuliaoleixingzhanbi()
    }, 1000);

  },
  methods:{
    cltxslqs() {
      const myChart = this.thisecharts.init(document.getElementById("chartsdemo"));
      const option = {
        xAxis: {
          type: 'category',
          data: ['2025-03', '2025-04', '2025-05', '2025-06', '2025-07', '2025-08', '2025-09'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            }
          },
        },
        textStyle:{
          color:'#fff'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option);
    },
    yichangkaizha() {
      const myChart = this.thisecharts.init(document.getElementById("yichangInfo"));
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          type: 'category',
          data: ['2025-03', '2025-04', '2025-05', '2025-06', '2025-07', '2025-08', '2025-09'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            }
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option);
    },
    wuliaoleixingzhanbi() {
      const myChart = this.thisecharts.init(document.getElementById("wuliaoleixing"));
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          type: 'category',
          data: ['钢材', '塑料', '木材', '橡胶', '纺织品', '燃料', '煤炭'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#c3dbff', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            }
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option);
    },
  }

}
</script>

<style  scoped>
#data-view {
  width: 100%;
  height: 100%;
  background-color: #030409;
  color: #fff;

  #dv-full-screen-container {
    background-image: url('@/assets/bg.png');
    background-size: 100% 100%;
    box-shadow: 0 0 3px blue;
    display: flex;
    flex-direction: column;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .block-left-right-content {
    flex: 1;
    display: flex;
    margin-top: 20px;
  }

  .block-top-bottom-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-left: 20px;
  }

  .block-top-content {
    height: 55%;
    display: flex;
    flex-grow: 0;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
}
 /deep/ .dv-water-pond-level canvas {
  margin-top: 15px;
   margin-left: 0px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
  box-sizing: border-box;
}
</style>
